<template>
    <div>
             <!--用来存放文件信息-->
      <div id="thelist" class="uploader-list"></div>
          <div class="btns">
              <div id="picker" class="btn btn-info">选择文件</div>
              <!-- <button id="ctlBtn" class="btn btn-info">开始上传</button> -->
          </div>
      </div>

    </div>

</template>

<script>
    

    export default {
      name: 'webloaderfile',
      data () {
        return {
         uploader:null
        }
      },
      methods: {
        test:function(){
          console.log(this.uploader)
          // this.uploader.upload()
        }
      },
      mounted() {

        this.uploader = WebUploader.create({

          // swf文件路径
          // swf: BASE_URL + '/js/Uploader.swf',

          // 文件接收服务端。
          server: 'http://webuploader.duapp.com/server/fileupload.php',

          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick: '#picker',
          auto: true,
          // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          resize: false,
          // headers: {'userName': 'emi', 'token': '123456'}
      })
        this.uploader.on( 'fileQueued', function( file ) {
            $('#thelist').append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
            '</div>' );
        })

        this.uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).find('p.state').text('已上传');
        });

        this.uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
            alert('上传出错')
        });

       
    }
}
</script>

<style scoped>

</style>
